<template>
  <div class="count-paid">
    <div class="card">
      <div class="card__header">
        <span class="label">当日使用次数（降锁次数）</span>
        <span class="value">{{ topInfo.useNum }}</span>
      </div>

      <div class="card__container">
        <ul class="count-sales__cop">
          <li>
            <span>小程序次数</span>

            <div class="fall">
              <!-- <i class="el-icon-bottom-right"></i> -->
              <!-- <span>-4%</span> -->
              <span class="cs">{{ topInfo.wxuseNum }}</span>
            </div>

          </li>
          <li>
            <span>服务器次数</span>

            <div class="fall">
              <!-- <i class="el-icon-bottom-right"></i> -->
              <!-- <span>-4%</span> -->
              <span class="cs">{{ topInfo.serviceuseNum }}</span>
            </div>

          </li>

        </ul>
      </div>

      <div class="card__footer" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    topInfo: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      chartOptions: {
        grid: {
          left: '10%',
          top: 0,
          right: '10%',
          bottom: 0
        },
        xAxis: {
          type: 'category',
          data: ['00:00', '2:00', '4:00', '6:00', '8:00', '10:00', '12:00', '14:00'],
          boundaryGap: false
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        series: [
          {
            barWidth: 18,
            name: '付款笔数',
            type: 'bar',
            data: [81, 24, 77, 13, 87, 92, 68, 55],
            itemStyle: {
              color: '#4165d7'
            }
          },
          {
            type: 'bar',
            barWidth: 18,
            xAxisIndex: 0,
            barGap: '-100%',
            data: [100, 100, 100, 100, 100, 100, 100, 100],
            itemStyle: {
              color: '#f1f1f9'
            },
            zlevel: -1
          }
        ]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.count-paid {
	.card {
		.echarts {
			height: 50px;
			width: 100%;
		}

		&__container {
			padding: 0;
		}
	}
}

.cvalue{
	font-size: 30px;
	font-weight: bold;
	color: #000;
}

.count-sales__cop{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;

	li{
		display: flex;
		list-style: none;
		flex: 1;
		color: #d8d8d8;

		.fall{
			color: #13ae7c;
		}

		.cs{
			position: relative;
			top: 2px;
			left: 10px;
		}
	}
}
</style>
